<template>
<div class="root">
	<an-nav></an-nav>
	<el-tabs tab-position="left" v-model="tabData.activeTab" @tab-click="tabsChange">
		<el-tab-pane :name="val.value" v-for="(val,ind) in tabsList" :key="ind">
			
			<template #label>
				<div class="label">
					<div class="label-2">{{val.name}}</div>
					<div class="label-1">{{val.value}}</div>
				</div>
			</template>
			
			<el-scrollbar height="76vh" v-loading="tabData.loading">
				<div class="flex c2" v-for="(v,i) in tabData.data" :key="i">
					<div class="c5">
						<el-popover
						    placement="right"
						    title="更多操作"
						    :width="120"
						    trigger="click">
							<div>
								<el-button @click="configInfo.data = v;configInfo.show = true;">配置信息</el-button>
								<el-button @click="delConfig(v)">删除配置</el-button>
								<el-button v-if="v.data_type == 'json'" @click="unshiftSub(v)">添加一项</el-button>
							</div>
						    <template #reference>
						      <div class="c7">
						      	<i class="iconfont">&#xeb00;</i>
						      	{{v.title}}:
						      </div>
						    </template>
						</el-popover>
					</div>

					<div class="c9" v-if="v.data_type == 'input'">
						<el-input v-model.trim="v.value" placeholder="请输入" clearable show-word-limit maxlength="100" ></el-input>
					</div>
					<div class="c9" v-if="v.data_type == 'textarea'">
						<el-input v-model.trim="v.value" :rows="3" type="textarea" placeholder="请输入"></el-input>
					</div>
					<div class="c9" v-if="v.data_type == 'img'" @click="selectImg(v.key,i,0)">
						<el-image class="c4" :src="config.serverImg + v.value" fit="scale-down" lazy />
					</div>
					<div class="c9" v-if="v.data_type == 'radio'">
						<el-radio v-model="v.value" label="1">是</el-radio>
						<el-radio v-model="v.value" label="0">否</el-radio>
					</div>
					
					<div class="c9 c13" v-if="v.data_type == 'editor'">
						<el-button type="primary"  @click="eidtValue(v,i,1)">编辑</el-button>
						<el-button type="primary"  @click="eidtValue(v,i,2)">预览</el-button>
					</div>
					
					<div class="c6" v-if="v.data_type == 'json'">
						<draggable tag="transition-group"
							:component-data="{tag: 'div',type: 'transition-group',name: !drag ? 'flip-list' : null}"
							class="list-group" :class="v.sub_name=='imgs'?'flex':''" :list="v.value" v-bind="dragOptions" @start="drag = true"
							@end="drag = false" item-key="id">
							<template #item="{ element,index }">
								<div class="flex c12" :class="v.sub_name=='imgs'?'c14':'c9'">

									<subBox :element="element" :name="v.sub_name" @delImg="removeOne(v.value,index)" @selectImg="selectImg($event,i,index)"/>
									
									<div class="c10 flex" v-if="v.sub_name != 'imgs'">
										<el-tooltip :content="element.show==='1'?'当前状态：显示':'当前状态：隐藏'" placement="left">
											<el-switch size="small" active-value="1" inactive-value="0" v-model="element.show">
											</el-switch>
										</el-tooltip>
										<el-tooltip content="移除当前配置项,保存更改后生效" placement="left">
											<div class="c11">
												<i class="iconfont" @click="removeOne(v.value,index)">&#xe7cc;</i>
											</div>
										</el-tooltip>
									</div>
								</div>
							</template>
						</draggable>
					</div>
					
				</div>
			</el-scrollbar>
			<div class="c3">
				<el-button size="large" type="primary" @click="showConfigAdd = true">
					新增{{tabData.activeTabName}}项
				</el-button>
				<el-button size="large" type="primary" @click="onSubmit">
					保存{{tabData.activeTabName}}更改
				</el-button>
			</div>
		</el-tab-pane>
	</el-tabs>
</div>

<el-dialog custom-class="previewEditor" v-model="editorData.previewEditor" width="1200px" center top="10vh" :title="editorData.option.title">
	<el-scrollbar height="70vh" style="padding:0 20px;">
		<div v-html="editorData.option.value"></div>
	</el-scrollbar>
</el-dialog>

<configEditor ref="editorRef" v-model:show="editorData.show" :option="editorData.option" @getContent="getContent"/>
<config-add v-model:show="showConfigAdd" :tabData="tabData" @reload="getList"/>
<a-img v-model:show="pickImg.show" @img="res=>{return imgSuccess(res,pickImg,tabData.data[pickImg.listIndex])}"/>
<config-info-box v-model:show="configInfo.show" :data="configInfo.data"/>
</template>

<script setup>
	import aUpImg from "@/components/a-up-img.vue"

	import publicJS from "@/hook/public.js";
	const {
		ElMessage,
		defaultImg,
		config,
		api
	} = publicJS();

	import {ElMessageBox} from 'element-plus'

	//组件库
	import subBox from "./components/index.vue"
	


	//富文本弹窗
	import configEditor from "./components/config-editor.vue"
	const editorData = reactive({
		show:false,
		previewEditor:false,
		index:0,//需要编辑的配置项index
		option:{
			value:'',
			title:''
		}
	});

	const editorRef = ref(null)

	//打开富文本弹窗
	const eidtValue = (data,index,type)=>{
		editorData.index = index;
		editorData.option = data;
		if(type == 1){
			editorData.show = true;
			editorRef.value.setData(data.value);
		}else{
			editorData.previewEditor = true;
		}
	}

	//获取编辑好的文本赋值到配置项中
	const getContent = (content)=>{
		setTimeout(() => {
			tabData.data[editorData.index].value = content;
		}, 1);
	}

	
	// const showConfigAdd = ref(false);
	
	//新增配置 弹窗
	import configAdd from "./components/config-add.vue"
	const showConfigAdd = ref(false);
	
	//组件信息 弹窗
	import configInfoBox from "./components/config-info.vue"
	const configInfo = reactive({show: false,data: null})

	//tabs配置项
	
	import subData from "./useSubData.js";
	const {imgSuccess,tabsList,unshiftSub} = subData();
	
	const tabData = reactive({
		loading: true,
		activeTab: '',
		activeTabName: '',
		tabsIndex:sessionStorage.getItem('configTabsIndex') || 0,
		list: [],
		data: []
	})
	tabData.activeTab = tabsList[tabData.tabsIndex].value;
	tabData.activeTabName = tabsList[tabData.tabsIndex].name;

	const tabsChange = (v) => {
		sessionStorage.setItem("configTabsIndex", v.index);
		tabData.tabsIndex = v.index;
		tabData.activeTabName = tabsList[v.index].name;
		getList(tabsList[v.index].value);
	}

	//获取当前tabIndex栏配置
	const getList = (type) => {
		tabData.loading = true;
		api.post('api/common/get_config_list', {
			type: type ? type : tabData.activeTab,
		}).then(res => {
			tabData.loading = false;
			tabData.data = [];
			tabData.data = res.data;
		})
	}
	getList();


	const onSubmit = () => {
		api.post('a/common/edit_config_list', {
			data:tabData.data
		}).then(res => {
			ElMessage.success('保存成功')
		})
	}

	const removeOne = (data,index)=>{
		if(data.length>1){
			data.splice(index, 1)
		}else{
			ElMessage.warning('移除失败，最少保留一个')
		}
		
	}

	const delConfig = (data) => {
		ElMessageBox.alert('删除后不可恢复，确定删除' + data.title, '系统提示', {
			// if you want to disable its autofocus
			// autofocus: false,
			confirmButtonText: '确定',
			callback: (action) => {
				console.log(action)
				if (action != 'cancel') {
					api.post('a/common/del_config', {
						id: data.id
					}).then(res => {
						ElMessage.success('删除成功')
						getList();
					})
				}
			},
		})
	}
	
	// 图片选择组件
	import aImg from '@/components/a-img-local.vue'

	const pickImg = reactive({
		show: false,
		name: '',
		listIndex: 0,
		valueIndex: 0,
	});
	

	//选择图片
	//valueName 当前配置项key名称
	//listIndex 当前配置项 所属的tabs栏 列表下标
	//valueIndex 当前配置项value下标
	//eventName 组件返回的名称，如果组件返回有名称，就用组件的名称
	const selectImg = (name, listIndex, valueIndex) => {
		pickImg.show = true;
		pickImg.name = name
		pickImg.listIndex = listIndex
		pickImg.valueIndex = valueIndex
	}

	//拖拽组件配置信息
	import draggable from 'vuedraggable'
	const drag = false;
	const dragOptions = computed(() => {
		return {
			animation: 200,
			group: "description",
			disabled: false,
			ghostClass: "ghost"
		}
	})
</script>

<style scoped lang="scss">
	:deep(.el-tabs__item) {
		height: auto;
	}
	.el-tabs__item.is-active{
		.label-1 {
			color: var(--el-color-primary);
		}
	
		.label-2 {
			color: var(--el-color-primary);
		}
	}
	.el-popover .el-button+.el-button{margin: 3px auto;}
	.el-popover .el-button{width:100%;margin: 3px auto;}
	 
	.label {
		padding: 15px 0;
		user-select: none;
	
		.label-1 {
			height: 20px;
			font-size: 14px;
			color: #555;
			line-height: 20px;
		}
	
		.label-2 {
			height: 20px;
			color: #888;
			margin-bottom: 3px;
			line-height: 20px;
		}
	}
	
	.root {
		background: #fff;
		padding: 0 10px;
		
	}


	.a1 {
		box-shadow: 0 -2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.c2 {
		padding: 10px 10px 10px 0px;
		align-items: flex-start;
		background:#fff;
		transition: .3s all;

		&:hover .c7 .iconfont{
			opacity: 1;
			color: var(--el-color-primary)
		}
		
		&:hover {
			background:var(--el-color-primary-light-03);
		}
	}

	.c3 {
		text-align: right;
		border-top: 1px solid #ccc;
		width: 100%;
		padding: 10px 10px 0;
	}

	.c4 {
		width: 100px;
		height: 100px;
		border: 1px solid #f1f1f1;
	}

	.c4:hover {
		border-color: var(--el-color-primary);
		cursor: pointer;
	}

	.c5 {
		font-size: 14px;
		width: 200px;
		text-align: right;
		padding:5px;
		margin-right: 10px;
	}
	.c6{width:100%}

	.c7 {
		line-height: 32px;cursor: pointer;
		.iconfont{opacity: 0;font-size: 18px;}
	}
	
	.c9 {
		width:100%;
		align-items: flex-start;
		font-size: 14px;
		padding:5px;
		position: relative;
		
	}

	.c10 {
		padding-left:20px;
		padding-right:10px;
		.iconfont {
			color: #aaa;
			cursor: pointer;
		}

		&:hover .iconfont {
			color: var(--el-color-primary);
		}
	}
	.c11{margin:6px auto;width:30px;text-align:center;}
	.c11 .iconfont{font-size:20px;}
	.c12{
		cursor: move;
		&:hover {
			background:var(--el-color-primary-light-03);
		}
	}
	.c13:hover{
		background: rgba(0,0,0,.2);
		.but{opacity: 1;}
	}
	.c13{padding-top: 7px;}
	.list-group{flex-wrap: wrap;}
</style>
